<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的事情</title>

</head>
<body>
<div id="thing_overview_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>我的事情</h1>
        <a href="setting/form" data-icon="gear">设置</a>
    </div>
    <div data-role="content">
        <div class="center red" style="display: none;" id="save_thing_info">保存事情成功!</div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div class="icon-board">
                    <a href="form" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/add.png" alt="Add">
                        <span class="icon-label">添加</span>
                    </a>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="icon-board">
                    <a href="archive/overview" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/delete.png" alt="Delete">
                        <span class="icon-label">删除</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div class="icon-board">
                    <a href="monitoring/overview" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/clock.png" alt="clock">
                        <span class="icon-label">监控<span
                                class="color-s">${thingAmountDto.monitoringAmountHtml}</span></span>
                    </a>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="icon-board">
                    <a href="search/initial" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/search.png" alt="search">
                        <span class="icon-label">搜索</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div class="icon-board">
                    <a href="warning/overview" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/warning.png" alt="warning">
                        <span class="icon-label">预警<span class="red">${thingAmountDto.warningAmountHtml}</span></span>
                    </a>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="icon-board">
                    <a href="history/overview" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/history.png" alt="history">
                        <span class="icon-label">历史${thingAmountDto.historyAmountHtml}</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div class="icon-board">
                    <a href="event/overview" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/event.png" alt="event">
                        <span class="icon-label">事件${thingAmountDto.eventAmountHtml}</span>
                    </a>
                </div>
            </div>
            <div class="ui-block-b">
                <div class="icon-board">
                    <a href="./chart/status" data-transition="flip">
                        <img src="${contextPath}/images/mobile/thing/chart.png" alt="chart">
                        <span class="icon-label">图表</span>
                    </a>
                </div>
            </div>
        </div>
        <%--<p class="ui-bar-d ui-corner-top ui-corner-bottom details-area center">--%>
        <%--每个时刻,我的脑子里都计划着一些事情,我把它记下来,设定优先级,然后一件件去完成它...--%>
        <%--</p>--%>
    </div>
    <style type="text/css">
        .ui-grid-a {
            text-align: center;
        }

        .ui-block-a, .ui-block-b {
            height: 100px;
            position: relative;
        }

        .icon-label {
            color: #222;
            display: block;
            font-size: 12px;
        }

        .icon-board {
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        a:link, a:visited, a:hover, a:active {
            text-decoration: none;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            <c:if test="${param.addThing}">
            $("#save_thing_info").fadeIn(800).delay(800).fadeOut(800);
            </c:if>
        });
    </script>
</div>
</body>
</html>